<template>
  <div>
    <el-card>
      <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
      <div id="owner"
           style="width: 350px;height:400px;"></div>
    </el-card>
  </div>
</template>
<script>
import * as echarts from 'echarts'

export default {
  data () {
    return {

    }

  },
  methods: {

  },
  created () {

  },
  mounted () {
    // 基于准备好的dom，初始化echarts实例
    var chartDom = document.getElementById('owner');
    var myChart = echarts.init(chartDom);

    // 指定图表的配置项和数据
    var option;

    option = {
      title: {
        text: '业主管理统计'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['投诉', '报事', '报修']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '投诉',
          type: 'line',
          stack: '总量',
          data: [120, 132, 101, 134, 90, 230, 210, 190, 156, 89, 100, 65]
        },
        {
          name: '报事',
          type: 'line',
          stack: '总量',
          data: [110, 82, 141, 234, 290, 330, 210, 110, 120, 180, 199, 222]
        },
        {
          name: '报修',
          type: 'line',
          stack: '总量',
          data: [150, 232, 201, 154, 190, 330, 410, 180, 190, 220, 110, 90]
        },

      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    option && myChart.setOption(option);
  }
}
</script>
